<template>
  <div class="entrepot">
    <h1>仓库管理</h1>
    <el-card class="box-card">
      <div class="fl main" ref="main"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "仓库出入库显示",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        backgroundColor: "",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(30, 30, 30,0.5)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#8aa740",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ["line", "bar", "tiled"],
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          data: [
            "xx原材料入库数量",
            "xx原材料出库数量",
            "xx成品入库数量",
            "xx成品出库数量",
          ],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "7%",
        },
        grid: {
          x: "12%",
          width: "82%",
          y: "12%",
        },
        xAxis: {
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],

        series: [
          {
            name: "xx原材料入库数量",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(156,107,211,0.5)",
                  },
                  {
                    offset: 0.2,
                    color: "rgba(156,107,211,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(156,107,211,0)",
                  },
                ]),
              },
            },
            z: -12,

            data: [
              18092,
              20728,
              24045,
              28348,
              32808,
              36097,
              39867,
              44715,
              48444,
              50415,
              56061,
              62677,
              59521,
              67560,
              18092,
              20728,
              24045,
              28348,
            ],
          },
          {
            name: "xx原材料出库数量",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#956FD4",
                  },
                  {
                    offset: 1,
                    color: "#3EACE5",
                  },
                ]),
              },
            },
            data: [
              4600,
              5000,
              5500,
              6500,
              7500,
              8500,
              9900,
              12500,
              14000,
              21500,
              23200,
              24450,
              25250,
              33300,
              4600,
              5000,
              5500,
              4555,
            ],
          },
          {
            name: "xx成品入库数量",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2",
              },
            },
            data: [
              1832,
              2028,
              2445,
              2838,
              3288,
              3607,
              3967,
              4415,
              4844,
              5045,
              5061,
              6677,
              5521,
              6560,
              1092,
              2028,
              2045,
              2348,
            ],
          },
          {
            name: "xx成品出库数量",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#00ca95",
              },
            },
            data: [
              460,
              500,
              550,
              1500,
              750,
              850,
              900,
              1200,
              1400,
              2150,
              2320,
              2445,
              2550,
              330,
              460,
              500,
              550,
              455,
            ],
          },
        ],
      },
    };
  },

  mounted() {
    this.Entrepot();
  },
  methods: {
    Entrepot() {
      //   效率情况
      let main = this.$echarts.init(this.$refs.main);
      console.log(main);
      main.setOption(this.option);
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/entrepot.less";
</style>
